<template>
	<view class="page">
		<view class="box fixed-auto">
			<!-- #ifdef APP -->
				<view class="inpVue">
					<view class="label">手机号</view>
					<view class="flex">
						<input type="number" v-model="name" placeholder="请输入手机号"/>
					</view>
				</view>
				<view class="inpVue margin50">
					<view class="label">验证码</view>
					<view class="flex align-center">
						<input type="number" v-model="code" placeholder="请输入验证码"/>
						<view class="code" @click="sendCode()">{{ text }}</view>
					</view>
				</view>
				<view class="loginBtn margin40" @click="loginFun()">登录</view>
				<view class="w100 text-center margin40">
					<u-checkbox v-model="checked" active-color="#18AB4E" label-size="26" mode="circle">
						<text style="color: #888; line-height: 1;">我已阅读并同意</text>
						<text style="color: #18AB4E; line-height: 1;">《登录协议》</text>
						<text style="color: #888; line-height: 1;">和</text>
						<text style="color: #18AB4E; line-height: 1;">《隐私政策》</text>
					</u-checkbox>
				</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
				<view class="absolute-auto w100">
					<view class="flex-column align-center">
						<image src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/2024102816235961611.jpg" style="width: 300rpx; height: 300rpx;"></image>
						<view style="font-weight: 700; font-size: 32rpx; color: #000;">香蕉数字人</view>
					</view>
					<view class="weChat flex-column align-center margin120">
						<image src="../../static/weChat.png" style="width: 80rpx; height: 80rpx;" @click="toLogin()"></image>
						<u-gap height="20"></u-gap>
						<text>微信授权登录</text>
					</view>
					<view class="w100 text-center margin40">
						<u-checkbox v-model="checked" active-color="#18AB4E" label-size="26" mode="circle">
							<text style="color: #888; line-height: 1;">我已阅读并同意</text>
							<text style="color: #18AB4E; line-height: 1;">《登录协议》</text>
							<text style="color: #888; line-height: 1;">和</text>
							<text style="color: #18AB4E; line-height: 1;">《隐私政策》</text>
						</u-checkbox>
					</view>
				</view>
			<!-- #endif -->
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="12">
			<view class="popVue padding40">
				<view class="flex align-center">
					<image src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/2024102816235961611.jpg" mode="widthFix" style="width: 46rpx;"></image>
					<text style="color: #333;font-weight: 600;padding-left: 20rpx;">AI数字人</text>
					<text style="color: #333;font-weight: 600;padding-left: 20rpx;">申请</text>
				</view>
				<view class="label">获取您的微信信息</view>
				<view class="btns flex-between align-center margin40">
					<view class="btn" @click="show = false">拒绝</view>
					<view class="btn" @click="loginByWeChat()">允许</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				name: "",
				code: "",
				text: '获取验证码',
				isSend: false,
				show: false,
			}
		},
		methods: {
			toLogin(){
				if(!this.checked) return this.$u.toast("请勾选登录协议和隐私政策")
				this.show = true
			},
			
			// 手机号登录
			async loginFun(){
				if(!this.checked) return this.$u.toast("请选勾选登录协议和隐私政策")
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (!this.code) return this.$u.toast("请输入验证码")
				uni.showLoading()
				const res = await this.$request("/aiet-user-center/user/codeLogin", {
					phone: this.name,
					code: this.code
				})
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('登录成功');
					uni.setStorageSync("ai-token", res.data.token)
					this.$store.dispatch("getUser")
					this.$store.state.isLogin = true
					setTimeout(()=>{
						uni.switchTab({
							url:"../index/index"
						})
					}, 1500)
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
				}
			},
			
			// 微信授权登录
			loginByWeChat(){
				this.show = false
				let that = this
				uni.showLoading()
				uni.login({
				    provider: 'weixin',
					// #ifdef APP
						onlyAuthorize: true,
					// #endif
				    success(loginRes){
						const { code } = loginRes;
						console.log(code)
						that.$request("/aiet-user-center/user/wxCodeLogin", { code }).then(res=>{
							if (res.code === 200) {
								uni.hideLoading()
								that.$u.toast('登录成功');
								uni.setStorageSync("ai-token", res.data.token)
								that.$store.dispatch("getUser")
								that.$store.state.isLogin = true
								setTimeout(()=>{
									uni.switchTab({
										url:"../index/index"
									})
								}, 1500)
							} else {
								uni.hideLoading()
								that.$u.toast(res.msg);
							}
						})
					},
					fail(loginErr){
						uni.hideLoading()
						that.$u.toast(loginErr.errMsg);
						console.log("uni.login调用失败：", loginErr)
					}
				})
			},
			
			// 发送验证码
			async sendCode(){
				if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
				if (this.isSend) return
				this.isSend = true;
				uni.showLoading()
				const res = await this.$request('/aiet-user-center/user/sendCode', {
					phone: this.name,
				});
				if (res.code === 200) {
					uni.hideLoading()
					this.$u.toast('发送成功');
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg);
					this.isSend = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background: #fff;
		border-radius: 12rpx;
		padding: 60rpx 30rpx;
		.weChat {
			// bottom: 50rpx;
			text {
				color: #000;
				line-height: 1;
			}
		}
		.inpVue {
			width: 100%;
			.label {
				color: #808080;
			}
			input {
				flex: 1;
				height: 88rpx;
				border-radius: 12rpx;
				border: 1rpx solid #ececec;
				padding-left: 30rpx;
				display: block;
				margin-top: 15rpx;
				color: #000;
			}
			.code {
				width: 200rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				margin-top: 15rpx;
				margin-left: 20rpx;
				border-radius: 12rpx;
				background: #f5f5f5;
				color: #fff;
				background: #18AB4E;
			}
		}
		.loginBtn {
			width: 100%;
			height: 88rpx;
			background: #18AB4E;
			border-radius: 44rpx;
			color: #fff;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.btn {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			color: #000;
			font-size: 30rpx;
		}
	}
	.popVue {
		width: 650rpx;
		background: #fff;
		border-radius: 10rpx;
		.label {
			color: #333;
			font-weight: 600;
			padding: 50rpx 0 30rpx;
		}
		.btns {
			width: 560rpx;
			height: 80rpx;
			.btn {
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				text-align: center;
				font-weight: 500;
			}
			.btn:nth-child(1){
				background: #f1f1f1;
				color: #18AB4E;
			}
			.btn:nth-child(2){
				background: #18AB4E;
				color: #fff;
			}
		}
	}
</style>
